<template>
	<div class='set-file-model popup'>
		<div class="content">
			<h2 class="center">文件设置</h2>
			<el-form
				class="container"
				ref="fileFormRef"
				:model="fileForm"
				:rules="RULE_FILE_SETTING"
				label-width="80px"
			>
				<el-form-item
					label="文件名"
					prop="filename"
				>
					<el-input
						v-model="fileForm.name"
						size="large"
					/>
				</el-form-item>
				<el-form-item
					label="附件价格"
					prop="price"
				>
					<el-input
						v-model.number="fileForm.price"
						size="large"
					/>
					<div
						v-if="fileForm.typeId!==6"
						class="price-hint"
					>
						*(最小值: {{priceRange[0]}}, 最大值: {{priceRange[1]}})
					</div>
				</el-form-item>
				<el-form-item
					v-if="fileForm.typeId!==6"
					label="成果类型"
					prop="typeId"
				>
					<el-select
						placeholder="请输入成果类型"
						v-model="fileForm.typeId"
						@change="computedPriceRange"
					>
						<el-option
							v-for="item in FILE_CLASSIFIES.slice(0,-1)"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item
					label="附件类型"
					prop="fileType"
				>
					<el-select
						placeholder="请输入成果类型"
						v-model="fileForm.fileType"
					>
						<el-option
							v-for="item in FILE_TYPES"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>
				<el-button
					class="confirm-btn"
					type="primary"
					size="large"
					@click="onclickConfirm(fileFormRef)"
				>
					确认
				</el-button>
			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts">
import { defineProps, reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { getFilePrice } from '@/api/project'
import { ProjectUploadFileType } from '@/modules/project'
import { RULE_FILE_SETTING } from '@/constants/rules'
import { FILE_CLASSIFIES, FILE_TYPES } from '@/constants/project'
import { $warn } from '@/utils/functions'

const fileFormRef = ref<any>()

const props = defineProps<{
  file: ProjectUploadFileType,
  awardLevel: number
}>()
const emit = defineEmits<{
  (e: 'updateFile', file: ProjectUploadFileType):void
}>()

const fileForm = reactive({
  name: props.file.name,
  fileType: props.file.fileType,
  typeId: props.file.typeId,
  price: props.file.price,
})

/* 价格范围，最小值-最大值 */
const priceRange = ref([0, 0])
/**
 * 成果类型改变后需要重新计算范围
 * @param setPrice 是否需要设置价格
 */
const computedPriceRange = async(setPrice = false) => {
  const price = (await getFilePrice({
    awardLevel: props.awardLevel,
    classifyId: fileForm.typeId
  })).data
  priceRange.value = [Math.ceil(price * 0.7), Math.floor(price * 1.3)]

  if (setPrice) {
    fileForm.price = price
  }
}

/**
 * 点击确认
 */
const onclickConfirm = (formEl:FormInstance) => {
  formEl.validate((valid) => {
    if (!valid) return
    /* 价格区间校验 */
    if (priceRange.value[ 0 ] > 0 && (fileForm.price < priceRange.value[ 0 ] || fileForm.price > priceRange.value[ 1 ])) {
      $warn('价格超出范围')
    }
    emit('updateFile', {
      ...props.file,
      ...fileForm
    })
  })
}

computedPriceRange(true)
</script>

<style lang="scss" scoped>
.set-file-model {
  .content {
    h2 {
      color: $primary1;
    }

    .el-form {
      margin: 10px 0;

      .price-hint {
        margin-top: 5px;
        font-size: $sMini;
        line-height: 1;
        color: $primary2;
      }

      .el-input,
      .el-select {
        width: 300px;
      }

      .confirm-btn {
        width: 100%;
      }
    }
  }
}
</style>
